<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/paint-friend.css">
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/iconfont.css"/>
    <script src="js/paint-friend.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/iconfont.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style type="text/css">
        body {
            background: #f6f9fa;
        }

        .nav > li > a {
            padding: 4px 5px;
        }

        header {
            background: white;
            height: 50px;
        }

        #ul {
            margin-top: 13px;
        }

        #ul > li > a {
            color: black;
            font-size: 10px;
        }

        .span {
            margin: -8px;
            background: white;
            margin-top: -4px;
        }

        #span {
            color: #5BC0DE;
        }

        .nav > li > a:hover {
            background: white;
        }

        #sc {
            width: 200%;
            background: #f4f4f4;
        }

        #button {
            margin-left: 147px;

        }

        #button > span {
            color: #999;
        }

        #login {
            margin-top: 6px;
        }

        #img {
            margin-top: 9px;
        }

        #li {
            width: 68px;
            height: 57px;
            margin-top: -16px;
            margin-left: 13px;
            background: #f45a8d;
            border-radius: 5px;
        }

        #a {
            text-align: center;
            margin-top: 17px;
            background: #f45a8d;
        }

        .sc2 {
            width: 300px;
            margin-left: -17px;
            height: 40px;
        }

        .button2 {
            margin-left: -17px;
            margin-top: 30px;
            width: 300px;
            background: #33b4de;
            color: white;
            height: 40px;
        }

        #message {
            font-size: 1.2rem;
            color: #B54735;
            text-align: center;
        }
    </style>
</head>
<body>
<header>
    <div class="container">
        <!--前-->
        <ul class="nav nav-pills navbar-nav" id="ul">
            <li class="span"><a href="new_file.html">
                <span class="iconfont icon-bilibilidonghua"></span>
            </a></li>
            <li><a href="#">主站</a></li>
            <li><a href="#">游戏中心</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">会员购</a></li>
            <li><a href="#">漫画</a></li>
            <li><a href="#">赛事</a></li>
            <li><a href="#">BML</a></li>
            <li><a href="#">
                <span id="span" class="glyphicon glyphicon-phone"></span>
                下载APP</a></li>

        </ul>

        <!-- 搜索框-->
        <form class="navbar-form  navbar-left" action="" method="post">
            <div class="form-group">
                <input type="text" id="sc" class="form-control" placeholder="请输入要找的类容"/>
            </div>
            <div class="form-group">
                <button id="button" class="btn btn-link" style="outline: none;border: none;">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </form>

        <!--后-->
        <div class="nav navbar-nav navbar-left" id="img">
            <a href="#">
                <img src="img/akari.jpg" style="height: 32px;"/>
            </a>
        </div>
        <ul class="nav navbar-nav navbar-left" id="ul">
            <li><a href="#">动态</a></li>
            <li><a href="#">历史</a></li>
            <li><a href="#">常做中心</a></li>
            <li id="li">
                <a href="#" id="a" style="color: white;">投稿</a>
            </li>
        </ul>
        <!---->
    </div>
</header>
<!---->
<div style="margin-top: -5px;">
    <div style="height: 90px;background: #00a0d8;">
        <div class="container">
            <img src="img/rl_top.35edfde.png"/>
        </div>
    </div>
    <div style="height:450px;background: white;">
        <div class="container">
            <div class="row">
                <div class="col-md-3" style="margin-top: 30px;">
                    <span style="font-weight: 600;">登录</span>
                    &nbsp;&nbsp;>&nbsp;&nbsp;
                    <span style="color: ;">忘记密码</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 col-md-offset-3" style="margin-top: 30px;">
                    <div style="border: 2px solid #f25d8e;color: #f25d8e;width: 24px;height: 24px;border-radius:50% ;">
                        <span style="margin-left: 6px;">1</span>
                    </div>
                </div>
                <div class="col-md-2" style="margin-top: 32px;margin-left: -159px;">
                    <span style="color:#f25d8e;font-size: 16px;">确认密码</span>
                    <div style="border: 2px solid #e5e9ef;width: 64px;margin-top: -13px;margin-left: 76px;"></div>
                </div>
                <!---->
                <div class="col-md-2 col-md-offset-2" style="margin-top: 30px;margin-left: -29px;">
                    <div style="border: 2px solid #99a2aa;color: #99a2aa;width: 24px;height: 24px;border-radius:50% ;">
                        <span style="margin-left: 6px;">2</span>
                    </div>
                </div>
                <div class="col-md-2" style="margin-top: 32px;margin-left: -159px;">
                    <span style="color:#99a2aa;font-size: 16px;">重置密码</span>
                    <div style="border: 2px solid #e5e9ef;width: 64px;margin-top: -13px;margin-left: 76px;"></div>
                </div>
                <!---->
                <div class="col-md-2 col-md-offset-2" style="margin-top: 30px;margin-left: -29px;">
                    <div style="border: 2px solid #99a2aa;color: #99a2aa;width: 24px;height: 24px;border-radius:50% ;">
                        <span style="margin-left: 6px;">3</span>
                    </div>
                </div>
                <div class="col-md-2" style="margin-top: 32px;margin-left: -159px;">
                    <span style="color:#99a2aa;font-size: 16px;">重置成功</span>
                </div>
            </div>
            <!--修改框-->
            <div class="row">
                <div class="col-md-12 col-md-offset-4" style="margin-top: 70px;">
                    <div class="form-group" id="box">
                        <div id="userapppassword">
                            <input v-model="phone" type="text" id="tel" name="phone" class="form-control sc2" placeholder="请输入绑定的手机号/邮箱"
                                   id="textInput"/>
                            <p style="margin-left: -16px;"></p>
                            <button id="btn" @click="passwordnb" class="btn button2">确认</button>
                        </div>
                    </div>
                </div>
                <!---->
            </div>
        </div>
    </div>
    <footer>
        <div class="foot_top clearfix">
            <div class="bilibili">
                <p>bilibili</p>
                <div class="about clearfix">
                    <ul>
                        <li><a href="###">关于我们</a></li>
                        <li><a href="###">联系我们</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">友情链接</a></li>
                        <li><a href="###">加入我们</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">哔哩哔哩周边</a></li>
                        <li><a href="###">官方认证</a></li>
                    </ul>
                </div>
            </div>
            <div class="fast_link">
                <p>传送门</p>
                <div class="about clearfix">
                    <ul>
                        <li><a href="###">帮助中心</a></li>
                        <li><a href="###">侵权申诉</a></li>
                        <li><a href="###">用户反馈论坛</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">高级弹幕</a></li>
                        <li><a href="###">分院帽计划</a></li>
                        <li><a href="###">壁纸站</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">活动专题页</a></li>
                        <li><a href="###">活动中心</a></li>
                        <li><a href="###">名人堂</a></li>
                    </ul>
                </div>
            </div>
            <div class="focus clearfix">
                <a href="###">
                    <dl>
                        <dt class="focus_pic phone"></dt>
                        <dt class="code_pic phone_code"></dt>
                        <dd class="focus_pro">手机端下载</dd>
                    </dl>
                </a>
                <a href="###">
                    <dl>
                        <dt class="focus_pic sina"></dt>
                        <dt class="code_pic sina_code"></dt>
                        <dd class="focus_pro">新浪微博</dd>
                    </dl>
                </a>
                <a href="###">
                    <dl>
                        <dt class="focus_pic official"></dt>
                        <dt class="code_pic wechat_code"></dt>
                        <dd class="focus_pro">官方微信</dd>
                    </dl>
                </a>
            </div>
        </div>
        <div class="foot_bottom clearfix">
            <div class="cooper"><img src="img/index/cooper.png" alt=""></div>
            <div class="foot_info">
                <p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 |
                    互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com |
                    违法不良信息举报电话：4000233233转3</p>
                <p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> | <a href="###">上海互联网举报中心</a> | <a href="###">12318
                    全国文化市场举报网站</a></p>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
</body>
<script type="text/javascript">
    var oBox = document.getElementById('box');
    var oBtn = document.getElementById('btn');
    var oP = document.getElementsByTagName('p')[0];
    oBtn.onclick = function () {
        var val = document.getElementById('tel').value;
        var reg = /^1[345678]\d{9}$/;
        if (val == '') {
            oP.style.color = "red";
            oP.innerHTML = "请输入手机号!";
        } else if (reg.test(val)) {
            oP.style.color = "green";
            oP.innerHTML = "输入正确！";
        } else {
            oP.style.color = "red";
            oP.innerHTML = "输入错误，请重新输入！";
        }
    }
    var vm = new Vue({
        el: '#userapppassword',
        data:{
            phone:"",
        },
        methods:{
            passwordnb:function () {
                alert("我来找回密码");
                axios.get("/registerPassword", {
                    params: {
                        phone: this.phone,
                    }
                }).then(res => {
                    if (res.data.msg == null) {
                        alert("手机号或邮箱不存在！")
                    } else {
                        var passwordUser = res.data;
                        sessionStorage.setItem("passwordUser",JSON.stringify(passwordUser));
                        location.href = "/blibli_loginpassword.html"
                    }
                })
            }
        }
    });
</script>
</html>
